<template>
    <div class="recommend">
        <div class="recommend-top">
                <div class="title"><slot name="titleText"></slot></div>
                <div class="link"><router-link to="/Find">播放<i class="iconfont icon-bofang"></i></router-link></div>
        </div>

        <div class="recommend-songList" ref="recommend" @touchstart="touchIn" @touchend="touchUp" @touchmove="touchOn">
            <ul class="recommend-ul" :style="{width : recommendWidth*3+'px','transform'  : `translateX(-${moveSum}px)`,'transition': transition}">
                <li class="recommend-li" :style="{width : recommendWidth+'px'}" v-for="(item,index) in songData" :key="item.id">
                        <div class="img-part">
                            <img v-lazy="item.picUrl" alt="" @touchstart="sendID(item.id,item.picUrl,item.name,index,item.song.artists[0].name)">
                        </div>
                        <div class="text-part">
                            <p :class="{'active' : clickNum === index }">{{item.name}} <span class="author">-{{item.song.artists[0].name}}</span></p>
                        </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name : 'recommendSong',
    data(){
        return{
            recommendWidth : 0,
            touchFirst : 0,
            touchMove : 0,
            index : 0,
            transition : "transform 0.2s",
            clickNum : -1,
        }
    },
    mounted(){
        this.$nextTick(()=>{
                    this.recommendWidth = this.$refs.recommend.offsetWidth
                    
        })
    },
    computed:{
        moveSum(){
                let num = this.index*this.recommendWidth+this.touchMove;
                return num
            }
    }
    ,
    methods: {
        touchIn(e){
            this.touchFirst = e.changedTouches[0].pageX;
        },
        toNext(){
            this.index++;
            this.index = this.index>2 ? 2 : this.index;
        },
        toPre(){
            this.index--;
            this.index = this.index<0 ? 0 : this.index;
        }
        ,
        touchUp(){
            let isChange = Math.abs(this.touchMove);
            if(isChange-this.recommendWidth/2 >0) {
                if(this.touchMove>0){
                this.toNext()
                this.transition = "transform 0.2s";
                }else if(this.touchMove<0){
                this.toPre()
                this.transition = "transform 0.2s";
                }
            }
            this.transition = "transform 0.2s";
            this.touchMove = 0;
        },
        touchOn(e){
            this.transition = "none";
            this.touchMove = this.touchFirst-e.changedTouches[0].pageX
        },
        sendID(id,picUrl,name,index,artists){
            if(this.clickNum !== index){
                let songUrl = null;
                axios.get(`/api/song/url?id=${id}`).then(response=>{
                    songUrl = response.data.data[0].url;
                    this.$emit("getid",{id,picUrl,name,songUrl,artists})
                })
                this.clickNum = index
            }
            
        }
    },
    props : {
        songData : {
            type : Array
        }
    }
}
</script>

<style lang="scss" scoped>
    .recommend {
        width: 90%;
        margin: auto;
        overflow: hidden;
        padding: 2rem 0rem ;
    }

    .recommend-top {
        width: 100%;
        height: 1.5rem;
        margin: 0.5rem 0rem ;
        display: flex;
        justify-content: space-between;


        .title {
            text-align: left;
            font-size: 1.2rem;
            font-weight: bold;
        }

        .link {
            padding:0rem 0.3rem;
            line-height: 1.4rem;
            font-size: 0.6rem;
            border: 1px solid rgb(163, 163, 163);
            border-radius: 5rem;

            >a {
                color: #000;
                text-decoration: none;
                font-size: 0.8rem;
            }

            .iconfont {
                font-size: 0.8rem;
            }
        }
    }

    .recommend-ul {
        display: flex;
        flex-wrap: wrap;

        .recommend-li {
            height: 3rem;
            padding: 0.5rem 0rem ;
            border-bottom: 2px dashed rgb(156, 156, 156);
            color: #000;
            display: flex;

            .active {
                color: #33CCBB;
            }
        }

        .img-part {
            width: 3rem;
            height: 3rem;
            border-radius: 0.5rem;
            overflow: hidden;

            >img {
                width: 100%;
            }
        }

        .text-part {
            flex: 1;
            height: 3rem;
            line-height: 3rem;
            font-size: 1rem; 
            padding-left: 0.8rem;
            box-sizing: border-box;
             overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行

            .author {
                color: #ccc;
                font-size: 0.8rem;
            }
        }


    }
</style>